<script>
import {ref} from "vue";
import useCount from "./hooks/useCount";

export default {
  name: "App",
  setup(props, context) {
    /*
          setup()主要有两个参数：
              参数一：props
              参数二：context
          props参数：
              父组件传递过来的属性会被放到props对象中，在setup()中需要使用直接通过props参数来获取
          context参数里面有三个属性：
              attrs：所有非prop的属性
              slots：父组件传递过来的插槽
              emit：当我们组件内部需要发出事件的时候需要使用emit(setup()里面不能访问到this所以不能使用this.$emit触发事件)
    */

    /*
         setup()函数里面默认定义的数据都不是响应式
         let count=0
         let count = ref(0)
         const sub = () => {
           count.value--
         }
         const add = () => {
           count.value++
         }
         return {count, sub, add}
       }
     */

    /*
      setup函数的返回值
        setup函数既然是一个函数，那么它也有返回值它的返回值可以在模板中被使用也就是说可以通过setup函数的返回值来替代data选项
        甚至可以返回一个函数来代替在methods中定义的方法
    */

    /*
      setup函数中的this并没有指向组件实例，并且在setup被调用之前data、computed、methods等都没有被解析，所以无法在setup中获取this
      setup()自身并不含对组件实例的访问权，即在 setup() 中访问 this会是undefined
      console.log(this)//undefined
    */


    // hooks的方法
    // 调用useCount函数返回一个对象然后解构赋值供模板使用
    const {count, add, sub} = useCount()
    return {
      count,
      add,
      sub
    }
  }
}
</script>
<template>
  <div class="App">
    <h1>{{ count }}</h1>
    <button @click="sub">-1</button>
    <button @click="add">+1</button>
  </div>
</template>

<style lang="less">

</style>
